<template>
    <div class="content">
        <filter-data :showType='4' :showCategory="showCategory"/>

        <div class="table-head" v-show="showTable || showTableEmpty">
            <div class="head-left" :class="{'head-left-shadow': managerList.length > 0 ? true : false }">广告系列</div>
            <div class="head-right">成效</div>
        </div>

        <div class="table" >
            <el-table  v-show="showTableEmpty" style="width: 100%" empty-text=" ">
                <el-table-column label="广告系列名称" width="130"></el-table-column>
                <el-table-column label="广告组名称" width="130"></el-table-column>
                <el-table-column label="受众" width="200"></el-table-column>
                <el-table-column label="广告名称" width="150"></el-table-column>
                <el-table-column label="广告形式" width="250"></el-table-column>
                <el-table-column label="已花费" width="150"></el-table-column>
                <el-table-column label="覆盖数" width="120"></el-table-column>
                <el-table-column label="展示数" width="120"></el-table-column>
                <el-table-column :render-header="renderHeader" width="120"></el-table-column>
                <el-table-column :render-header="renderHeader" width="120"></el-table-column>
                <el-table-column :render-header="renderHeader" width="120"></el-table-column>
                <el-table-column :render-header="renderHeader" width="120"></el-table-column>
                <el-table-column :render-header="renderHeader" width="120"></el-table-column>
            </el-table>
            <div class="empty-content" v-show="showTableEmpty">
                <div style="width: 100%">
                    <img src="../../../assets/img/no-data.png">
                </div>
                <span>暂无数据</span>
            </div>

            <loading :customClass="customLoading"  v-if="showLoading" />

            <el-table :data="managerList" style="width: 100%" v-show="showTable" empty-text=" " :row-class-name="tableRowClassName">
                <el-table-column fixed label="广告系列名称" width="130">
                    <template scope="scope">
                        <div v-show="scope.row.index == 0">
                            <div>{{scope.row.adSeriesName}}</div>
                            <el-switch class="create-switch"  style="margin: 20px 0"  @change="handleSwitchChange(scope.row,1)" v-model="scope.row.seriesStatus" on-text="" off-text=""></el-switch>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column fixed label="广告组名称" width="130">
                    <template scope="scope">
                        <div v-show="scope.row.index == 0">
                            <div>{{scope.row.adGroupName}}</div>
                            <el-switch class="create-switch" style="margin: 20px 0" @change="handleSwitchChange(scope.row,2)" v-model="scope.row.groupStatus" on-text="" off-text=""></el-switch>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column fixed label="受众" width="200">
                    <template scope="scope">
                        <div v-show="scope.row.index == 0">
                            <div v-if="scope.row.audienceInfo.name">名称：{{scope.row.audienceInfo.name}}</div>
                            <div v-show="scope.row.audienceInfo.type != '自定义受众' && scope.row.audienceInfo.type != '类似受众'">
                                <div v-if="scope.row.audienceInfo.countryList">位置：{{scope.row.audienceInfo.countryList}}</div>
                                <div v-if="scope.row.audienceInfo.localesList">语言：{{scope.row.audienceInfo.localesList}}</div>
                                <div>性别：{{scope.row.audienceInfo.genderName}}</div>
                                <div v-if="scope.row.audienceInfo.minAge && scope.row.audienceInfo.maxAge">年龄：{{scope.row.audienceInfo.minAge}} - {{scope.row.audienceInfo.maxAge}}</div>
                                <div v-if="scope.row.audienceInfo.suggestionsList">细分定位：{{scope.row.audienceInfo.suggestionsList}}</div>
                                <div v-if="scope.row.audienceInfo.connectionTypeName">关系：{{scope.row.audienceInfo.connectionTypeName}}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column fixed label="广告名称" width="150">
                    <template scope="scope">
                        <div class="star-wrap" v-show="scope.row.isExcellent">
                            <img src="../../../assets/img/star.png">
                        </div>
                        <div>{{scope.row.adName}}</div>
                        <el-switch class="create-switch" style="margin: 20px 0" @change="handleSwitchChange(scope.row,3)" v-model="scope.row.adsStatus" on-text="" off-text=""></el-switch>
                    </template>
                </el-table-column>

                <el-table-column fixed label="广告形式" width="250">
                    <template scope="scope">
                        <div class="scope-content">
                            <div class="scope-img"><img :src="scope.row.adContentList[0].imgUrl"></div>
                            <div class="scope-txt">
                                <el-tooltip placement="top">
                                    <div slot="content">{{scope.row.adContentList[0].name}}</div>
                                    <div class="txt-wrap txt-wrap1 txt-title">{{scope.row.adContentList[0].name}}</div>
                                </el-tooltip>
                                <el-tooltip placement="top" >
                                    <div slot="content">{{scope.row.adContentList[0].message}}</div>
                                    <div class="txt-wrap txt-wrap1 txt-message">{{scope.row.adContentList[0].message}}</div>
                                </el-tooltip>
                                <el-tooltip placement="top" >
                                    <div slot="content">{{scope.row.adContentList[0].description}}</div>
                                    <div class="txt-wrap txt-message">{{scope.row.adContentList[0].description}}</div>
                                </el-tooltip>
                                <div class="txt-url">{{scope.row.adContentList[0].link}}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column prop="spend" label="已花费" width="150"></el-table-column>
                <el-table-column prop="reach" label="覆盖数" width="120"></el-table-column>
                <el-table-column prop="impressions" label="展示数" width="120"></el-table-column>
                <el-table-column prop="effective" :render-header="renderHeader" width="120"></el-table-column>
                <el-table-column prop="cpm" :render-header="renderHeader" width="120"></el-table-column>
                <el-table-column prop="cpc" :render-header="renderHeader" width="120"></el-table-column>
                <el-table-column prop="frequency" :render-header="renderHeader" width="120"></el-table-column>
                <el-table-column prop="websiteClickCtr" :render-header="renderHeader" width="120"></el-table-column>
            </el-table>

            <el-pagination
                    v-show="showTable"
                    class="pagination"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.pageNum"
                    :page-sizes="page.pageSizes"
                    :page-size="10"
                    layout="prev, pager, next, sizes, jumper"
                    :total="page.total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import FilterData from '~/components/manager/facebook/filterData.vue'
    import loading from '~/components/loading.vue'
    import { mapGetters} from 'vuex';
    import * as types from '../../../store/mutation-types/manager/index'
    import { getStatusName , getStatus ,switchStatus , getConnectType} from '~/assets/js/option'
    import { isInteger ,changeParam, getParam, getCookie ,setToken ,getTab} from '~/assets/js/global'
    import Vue from 'vue'
    import { Table, TableColumn ,Button, Switch , Pagination, Tooltip, Message} from 'element-ui'
    Vue.use(Table);
    Vue.use(TableColumn);
    Vue.use(Button);
    Vue.use(Switch);
    Vue.use(Pagination);
    Vue.use(Tooltip);

    export default{
        layout: 'facebook-manager',
        components: {
            FilterData,
            loading
        },
        data(){
            return {
                showLoading: false,
                customLoading : 'top:580px',
                showCategory: false,
                showTableEmpty:false,
                showTable:false,
                managerList: [],
                page: {
                    pageSizes: [10, 20, 50],    // 每页可选条数列表,
                    total: 0,
                    pageNum: 1
                },
                filter: {
                    pageNum: 1,
                    pageSize: 10,
                    id: ''
                }
            }
        },
        methods: {
            //获取列表
            getManagerList(){
                this.showLoading = true;
                this.$store.dispatch('getAbTestList',this.filter)
                    .then((response)=>{
                        var result=response.data;
                        if(result && result.code == 1){
                            var list = result.data.list;
                            if(list.length>0){
                                for (var i = 0; i < list.length;i++){
                                    list[i].index = i;
                                    list[i].seriesStatus = getStatus(list[i].adSeriesStatus);
                                    list[i].groupStatus = getStatus(list[i].adGroupStatus);
                                    list[i].adsStatus = getStatus(list[i].adStatus);
                                    list[i].spend = isInteger(list[i].spend, 1);
                                    list[i].cpm = isInteger(list[i].cpm, 1);
                                    list[i].cpc = isInteger(list[i].cpc, 1);
                                    list[i].frequency = isInteger(list[i].frequency);
                                    list[i].websiteClickCtr = isInteger(list[i].websiteClickCtr,2);
                                    if(list[i].isExcellent) {
                                        list[i].type = 'excellent';
                                    }
                                    if(list[i].audienceInfo){
                                        if(list[i].audienceInfo.connectionType){
                                            list[i].audienceInfo.connectionTypeName = getConnectType(list[i].audienceInfo.connectionType);
                                        }

                                        if(list[i].audienceInfo.places && list[i].audienceInfo.places.length>0){
                                            list[i].audienceInfo.countryLists = [];
                                            for(var j=0;j<list[i].audienceInfo.places.length;j++){
                                                list[i].audienceInfo.countryLists.push(list[i].audienceInfo.places[j].country);
                                            }
                                            list[i].audienceInfo.countryList = list[i].audienceInfo.countryLists.join('、');
                                        }

                                        if(list[i].audienceInfo.locales && list[i].audienceInfo.locales.length>0){
                                            for(var j=0;j<list[i].audienceInfo.locales.length;j++){
                                                list[i].audienceInfo.localesList = list[i].audienceInfo.locales[j].places;
                                            }
                                        }

                                        if(list[i].audienceInfo.gender){
                                            list[i].audienceInfo.genderName = list[i].audienceInfo.gender == 1 ? '男': '女';
                                        }else{
                                            list[i].audienceInfo.genderName = '全部';
                                        }

                                        if(list[i].audienceInfo.suggestions && list[i].audienceInfo.suggestions.length>0){
                                            list[i].audienceInfo.suggestionsLists = [];
                                            for(var j=0;j<list[i].audienceInfo.suggestions.length;j++){
                                                list[i].audienceInfo.suggestionsLists.push(list[i].audienceInfo.suggestions[j].name);
                                            }
                                            list[i].audienceInfo.suggestionsList = list[i].audienceInfo.suggestionsLists.join('、');
                                        }

                                    }
                                }
                                this.managerList = list;

                                this.showTable = true;
                                this.showTableEmpty = false;
                                this.showCategory = true;
                                this.showLoading = false;
                                this.page.total = result.data.total;
                                this.page.pageNum = result.data.pageNum > 0 ? result.data.pageNum : 1;
                                if(this.managerList.length>0){
                                    this.$store.commit(types.BUDGET_DATA , {budgetData: this.managerList[0].budgetScheduling})
                                }
                            }else{
                                this.showTableEmpty = true;
                                this.showTable = false;
                                this.showCategory = true;
                                this.showLoading = false;
                            }
                        }else{
                            this.showTableEmpty = true;
                            this.showTable = false;
                            this.showCategory = true;
                            this.showLoading = false;
                        }
                    })
                    .catch((error) => {
                        this.showTableEmpty = true;
                        this.showTable = false;
                        this.showCategory = true;
                        this.showLoading = false;
                    })
            },

            //编辑广告系列状态
            handleSwitchChange(row,type) {
                switch (type){
                    case 1:
                        var filter={
                            localId: row.adSeriesId,
                            platFormId: row.adSeriesPlatformId,
                            status: switchStatus(row.seriesStatus)
                        };
                        this.$store.dispatch('updateAdSeriesStatus',filter)
                        .then(response => {
                            if(response.data.code != 1){
                                row.seriesStatus = !row.seriesStatus;
                            }
                        })
                        .catch((error) => {
                            Message.error({
                                message: '编辑广告系列：'+ row.adSeriesName + '的状态失败，请重试'
                            });
                            row.seriesStatus = !row.seriesStatus;
                        });
                        break;
                    case 2:
                        var filter={
                            localId: row.adGroupId,
                            platFormId: row.adGroupPlatformId,
                            status: switchStatus(row.groupStatus)
                        };
                        this.$store.dispatch('updateAdGroupStatus',filter)
                            .then(response => {
                                if(response.data.code != 1){
                                    row.groupStatus = !row.groupStatus;
                                }
                            })
                            .catch((error) => {
                                Message.error({
                                    message: '编辑广告组：'+ row.adGroupName + '的状态失败，请重试'
                                });
                                row.groupStatus = !row.groupStatus;
                            });
                        break;
                    case 3:
                        var filter={
                            localId: row.adId,
                            platFormId: row.adPlatformId,
                            status: switchStatus(row.adsStatus)
                        };
                        this.$store.dispatch('updateAdStatus',filter)
                            .then(response => {
                                if(response.data.code != 1){
                                    row.adsStatus = !row.adsStatus;
                                }
                            })
                            .catch((error) => {
                                Message.error({
                                    message: '编辑广告：'+ row.name + '的状态失败，请重试'
                                });
                                row.adsStatus = !row.adsStatus;
                            });
                        break;
                }
            },

            handleSizeChange(val) {
                this.filter.pageSize = val;
                this.filter.pageNum = 1;
//                changeParam('pageNum',1);
//                changeParam('pageSize',val);
                this.getManagerList();
            },
            handleCurrentChange(val) {
                this.filter.pageNum = val;
//                changeParam('pageNum',val);
                this.getManagerList();
            },
            renderHeader(h, { column, $index }){
                switch ($index) {
                    case 8:
                        return (
                            <el-tooltip placement="top">
                                <div slot="content" style="line-height:20px">目标为访问量时，成效为点击链接量<br/>目标为品牌知名度时，成效为覆盖数<br/>目标为主页赞时，成效为点赞数<br/></div>
                                <div>成效&nbsp;<i class="iconfont icon-tip" style="color: #B0BEC5;font-size:12px"></i></div>
                            </el-tooltip>
                        )
                        break;
                    case 9:
                        return (
                                <el-tooltip content="千次展示费用" placement="top">
                                    <div>CPM&nbsp;<i class="iconfont icon-tip" style="color: #B0BEC5;font-size:12px"></i></div>
                                </el-tooltip>
                        )
                        break;
                    case 10:
                        return (
                                <el-tooltip content="每次点击费用" placement="top">
                                    <div>CPC&nbsp;<i class="iconfont icon-tip" style="color: #B0BEC5;font-size:12px"></i></div>
                                </el-tooltip>
                        )
                        break;
                    case 11:
                        return (
                                <el-tooltip content="每个用户看到的广告平均次数" placement="top">
                                    <div>展示频率&nbsp;<i class="iconfont icon-tip" style="color: #B0BEC5;font-size:12px"></i></div>
                                </el-tooltip>
                        )
                        break;
                    case 12:
                        return (
                                <el-tooltip content="链接点击率=点击链接数／展示次数" placement="top">
                                    <div>链接点击率&nbsp;<i class="iconfont icon-tip" style="color: #B0BEC5;font-size:12px"></i></div>
                                </el-tooltip>
                        )
                        break;
                }
            },
            filterData(val,type) {
                switch (type){
                    case 5:
                        this.filter.id = val.id;
                        this.getManagerList();
                        break;
                }
            },
            tableRowClassName(row, index) {
                if(row.type == 'excellent') {
                    return 'summary-row';
                }
                return '';
            },
        },
        created() {
            if (process.BROWSER_BUILD ) {
                if(getTab() == '3') {
                    if (getParam('pageNum')) {
                        this.filter.pageNum = getParam('pageNum');
                        this.page.pageNum = parseInt(getParam('pageNum'));
                    }
                    if (getParam('pageSize')) {
                        this.filter.pageSize = getParam('pageSize');
                        this.page.pageSize = parseInt(getParam('pageSize'));
                    }
                }
                this.getManagerList();
            }
        }
    }
</script>

<style scoped lang="scss">
    .content {
        max-width: 1200px;
        margin: 0 auto;
        .table-head {
            height: 47px;
            line-height: 44px;
            background: #F0F5F8;
            border: 1px solid #EAEEF0;
            border-bottom: none;
            border-radius: 4px 4px 0 0;
            font-family: MicrosoftYaHei-Bold;
            font-size: 13px;
            color: #666666;
            letter-spacing: 0;
            text-indent: 20px;
            .head-left {
                width: 860px;
                float: left;
            }
            .head-right {
                float: left;
            }
        }
        .icon-action {
            color: #B0BEC5;
            margin: 0 5px;
            cursor: pointer;
        }
        .pagination {
            float: right;
            padding: 20px 0 40px 0;
        }
        status-pot {
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            margin-right: 10px;
        }
        .pot-blue {
            background: #0686F9;
        }
        .pot-red {
            background: #FF3526;
        }
        .pot-grey {
            background: #AAA;
        }
        .scope-content{
            width: 100%;
            display: flex;
            padding: 10px 0;
            .scope-img{
                width: 64px;
                height: 100%;
                margin-right: 10px;
                img{
                    width: 50px;
                }
            }
            .scope-txt {
                flex: 2;
            }
        }

        .empty-content {
            position: absolute;
            text-align: center;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            img {
                width: 100px;
                height: 100px;
            }
            span {
                font-size: 13px;
                color: #0686F9;
                letter-spacing: 0;
                margin: 20px 0 0 -26px;
                display:inline-block;
            }
        }
        .table{
            position: relative;
        }
        .star-wrap{
            width: 30px;
            margin: 0 auto;
            img{
                width: 100%;
            }
        }
    }


</style>
